import QtQuick 2.0
import QtQuick.Layouts 1.12
Item {

    id: root

    property int rowNum: 6
    property int colNum: 6

    property real titleSize: 30
    property real gridWidth: (root.width-titleSize) / colNum
    property real gridHeight: (root.height-titleSize) / rowNum

    property string selectedColor: "#99C8FF"

    signal selectedChanged(string name)

    function setSelectableList(list){
        for(let i = 0; i < repeater.count; i ++){
            if((repeater.itemAt(i).children[1].text) === list[0]){  // 更新选中状态为list中第一个元素
                selectedIndex = i
                selectedText = list[0]
            }
            if(list.indexOf(repeater.itemAt(i).children[1].text) !== -1){
                repeater.itemAt(i).children[3].visible = false
                repeater.itemAt(i).children[2].visible = true
            }else{
                repeater.itemAt(i).children[3].visible = true
                repeater.itemAt(i).children[2].visible = false
            }
        }
    }



    property var letters: ["A","B","C","D","E","F","G","H","I","J","K","L"]

    property int selectedIndex: 0
    property string selectedText: ""
    property string hoveredText: ""

    function clickItem(index){
        var name = repeater.itemAt(index).children[1].text
        selectedChanged(name)
        selectedIndex = index
    }



    Rectangle{
        height: titleSize
        width: titleSize
        color: "#EBF3FF"
    }

    Rectangle{          // 上面的表头
        x: titleSize
        height: titleSize
        width: root.width - titleSize
        color: "#EBF3FF"
        Row{
            height: titleSize
            width: root.width - titleSize
            Repeater{
                model: colNum
                Item{
                    height: titleSize
                    width: gridWidth
                    Text {
                        text: index+1
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }

    Rectangle{          // 左侧的表头
        height: root.height - titleSize
        width: titleSize
        y: titleSize
        color: "#EBF3FF"
        Column{
            height: root.height - titleSize
            width: titleSize
            Repeater{
                model: rowNum
                Item{
                    height: gridHeight
                    width: titleSize
                    Text{
                        text: letters[index]
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }

    // 表格
    Rectangle{
        height: root.height - titleSize
        width: root.width - titleSize
        x: titleSize
        y: titleSize
        border.color: "#CCCCCC"
        color: "#CCCCCC"
        Grid{
            spacing: 1
            columns: colNum
            rows: rowNum
            Repeater{
                id: repeater
                model: rowNum * colNum
                Rectangle{
                    height: gridHeight-1
                    width: gridWidth-1
                    color: selectedIndex === index ? selectedColor : "#FFFFFF"
                    Rectangle{      // children [0]
                        anchors.fill: parent
                        color: selectedColor
                        opacity: 0.12
                        visible: false
                    }
                    Text{           // children [1]
                        text: letters[Math.floor(index/colNum)] + (index%colNum + 1)
                        anchors.centerIn: parent
                    }
                    MouseArea{      // children [2]
                        cursorShape: Qt.PointingHandCursor
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.children[0].visible = true
                            hoveredText = parent.children[1].text
                            CConfig.setBoldCurveList([curChannel+"_"+selectedText, curChannel+"_"+hoveredText])
                        }onExited: {
                            parent.children[0].visible = false
                            if(hoveredText===parent.children[1].text){
                                hoveredText = ""
                            }
                            CConfig.setBoldCurveList([curChannel+"_"+selectedText, curChannel+"_"+hoveredText])
                        }
                        onReleased: {
                            clickItem(index)
                            selectedText = parent.children[1].text
                            CConfig.setBoldCurveList([curChannel+"_"+selectedText, curChannel+"_"+hoveredText])
                            root.focus = true
                        }
                        visible: true
                    }Rectangle{     // children [3]
                        anchors.fill: parent
                        visible: false
                        color: "#F8F8F8"
                    }
                }
            }
        }
    }


}
